<html>
<head>
    <link type="text/css" href="<?php echo base_url()?>css/styles.css" rel="stylesheet" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="<?php echo base_url()?>js/jquery.js"></script>
    <script type="text/javascript" src="<?php echo base_url()?>js/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jquery-ui.css"/>
    <script type="text/javascript">
	var geocoder;
var map;
var marker;
var marker1;
   
function initialize(){
//MAP
<?php foreach($place as $row):?>
  var latlng = new google.maps.LatLng(<?php echo $row->latitude?>,<?php echo $row->longitude?>);
  var options = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
       
  map = new google.maps.Map(document.getElementById("map_canvas_add"), options);
       
  //GEOCODER
  geocoder = new google.maps.Geocoder();
       
  marker = new google.maps.Marker({
    map: map,
	position:latlng,
    draggable: true
  });

   google.maps.event.addListener(marker, 'drag', function() {
    geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[0]) {
          $('#address').val(results[0].formatted_address);
          $('#latitude').val(marker.getPosition().lat());
          $('#longitude').val(marker.getPosition().lng());
        }
      }
    });
  }); 
<?php endforeach?>         
}

$(document).ready(function() {
         
  initialize();
              
  $(function() {
    $("#address").autocomplete({
      //This bit uses the geocoder to fetch address values
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      //This bit is executed upon selection of an address
      select: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
  });
});
  
 
	
	
	</script>
</head>
<body>
<div id="wrapper">
<div id="wrapper3">
	<div id="onecolumn">
		<div id="kotakphoto8"><h1>Edit Place</h1></div>
		<div id="map_canvas_add"></div>
		<div class="menuplace3">
	
		<?php foreach($place as $row):?>
			
			<?php echo form_open_multipart('place/update');?>
			<div class="label">Nama :</div><textarea name="name" class="content1"><?php echo $row->name?></textarea>
			<div class="label">Deskripsi :</div><textarea name="description" class="content2"><?php echo $row->description?></textarea>
			<div class="label">Alamat :</div><textarea id="address"  name="street"><?php echo $row->street?></textarea>
			<input id="latitude" type="hidden" name="latitude"/>
			<input id="longitude" type="hidden" name="longitude"/>
			<input type="hidden" name="id_place" value="<?php echo $row->id_place?>"/>
			<div class="clear"></div>
			<div id="latar">
			<input type="submit" value="save" class="savebutton">
			</div>
			</form>
		<?php endforeach?>
		</div>
		<div id="tipsaddmap">
		Tips : Search alamat dengan mengetikkan nama alamat terdekat.
		</div>
		<?php echo $this->session->flashdata('error');  
		?>
	</div>
</div>
</div>
</body>
</html>